<template>
  <div class="tabs">
    <ze-scroll class="good-scroll" :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
      <div v-if="newsList.length" class="news-list">
        <iteration-list
          ref="iterList"
          style="height: 100px"
          :list-data="newsList"
          :staff-title="'项目管理'"
          @getLCList="getLCList"
        />
      </div>
      <van-empty v-else description="暂无数据" />
    </ze-scroll>
  </div>
</template>
<script>
import iterationList from './component/iteration-list.vue'
import { getProjectMainTask } from '@/apis/project'
export default {
  components: { iterationList },
  onLoad(option) {},
  data() {
    return {
      current: 0,
      loading: true,
      newsList: [],
      status: 'more',
      pageNo: 1,
      pageSize: 10,
      finished: false,
      types: [
        { value: 0, label: '全部' },
        { value: 1, label: '未完成' },
        { value: 2, label: '未开始' },
        { value: 3, label: '进行中' },
        { value: 3, label: '已关闭' },
      ],
      projectId: '',
    }
  },
  mounted() {
    uni.$on('XMLC', (projId) => {
      this.projectId = projId
      const params = {
        projectId: this.projectId,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      this.getLiChengList()
    })
  },
  methods: {
    getLCList() {
      this.getLiChengList()
    },
    // 获取里程列表
    async getLiChengList() {
      uni.showLoading({
        title: '查询中',
      })
      if (this.pageNo > 1) {
        this.status = 'loading'
      }
      const params = { pageNo: this.pageNo, pageSize: this.pageSize, id: this.projectId }
      const res = await getProjectMainTask(params)
      const { total, records } = res
      if (this.pageNo === 1) {
        this.newsList = records
      } else {
        this.newsList = [...this.newsList, ...records]
      }
      this.loading = false
      this.status = this.newsList.length >= total ? 'noMore' : 'more'
      uni.hideLoading()
    },
    handleScrolltolower() {
      this.loadMore()
    },
  },
  loadMore() {
    if (this.finished) {
      return
    }
    this.pageNo++
    this.getLiChengList()
  },
}
</script>
<style lang="scss" scoped>
.tabs {
  // display: flex;
  // align-items: center;
  // padding-top: 10px;
  column-gap: 20px;
  // margin-bottom: 200px;

  .tab {
    margin-bottom: 10px;
    position: relative;
    transition: all 250ms;
    background: #f4f4f4;
    color: #999;
    border-radius: 2px;
    width: 61px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;

    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 0px;
      height: 2px;
      left: 50%;
      bottom: -7px;
      transform: translateX(-50%);
      background: #fff;
      border-radius: 1px;
      transition: all 250ms;
    }

    &.active {
      font-weight: 500;
      background: #739eca;
      color: #fff;
      &::after {
        width: 16px;
      }
    }
  }
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
</style>
<style lang="scss"></style>
